<template>
  <section class="todoapp">
    <TodoHead @addlist="addlist" />
    <TodoMain
      :todolist="RenderList"
      @changethisBtn="changethisBtn"
      @dellist="Dellist"
      @allchoice="allchoice"
    />
    <TodoFooter
      :lastsum="lastsum"
      :clearshow="clearshow"
      @delAllDone="delAllDone"
      @classtype="Changethistype"
    />
  </section>
</template>

<script>
import TodoHead from './components/TodoHead.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  name: 'App',
  components: {
    TodoHead,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          value: '读万卷书',
          flag: false,
        },
        {
          id: 2,
          value: '行万里路',
          flag: false,
        },
      ],
      isshow: true,
      classtype: 'All',
    }
  },
  methods: {
    //点击按钮样式改变
    changethisBtn(id, flag) {
      this.list.forEach((item) => {
        if (item.id === id) {
          item.flag = flag
        }
      })
    },
    //添加功能
    addlist(value) {
      if (value === '') return alert('输入内容不能为空，请重新输入')
      this.list.unshift({
        id: +new Date(),
        value: value,
        flag: false,
      })
    },
    //删除功能
    Dellist(value) {
      const thisDellist = this.list.find((item) => item.value === value)
      if (thisDellist.flag === false) return alert('该任务没有做完不能删除')
      this.list = this.list.filter((item) => item.value !== value)
    },
    //点击全选功能
    allchoice(flag) {
      this.list.forEach((item) => (item.flag = flag))
    },
    //删除所有
    delAllDone() {
      this.list = this.list.filter((item) => item.flag === false)
    },
    //改样式
    Changethistype(value) {
      this.classtype = value
    },
  },
  computed: {
    //剩余
    lastsum() {
      return this.list.filter((item) => !item.flag).length
    },
    //清除已完成显示和隐藏
    clearshow() {
      return this.list.filter((item) => !item.flag).length === this.list.length
        ? this.isshow === false
        : this.isshow === true
    },
    RenderList() {
      return this.classtype === 'All'
        ? this.list
        : this.classtype === 'active'
        ? this.list.filter((item) => item.flag === false)
        : this.list.filter((item) => item.flag === true)
    },
  },
}
</script>

<style></style>
